<template>
  <div class="custom-navbar">
    <div class="search">
      <uni-icons class="input-icon" type="mic" size="30"></uni-icons>
      <input v-model="inputvalue" placeholder="请输入歌名" class="input" />
      <uni-icons class="input-icon" type="search" size="20"></uni-icons>
    </div>
    <div class="select">
      <div
        class="nav-btn"
        :class="{ 'nav-btn-active': activeNav === '1' }"
        @click="$emit('update-nav','1')"
      >
        推荐
      </div>
      <div
        class="nav-btn"
        :class="{ 'nav-btn-active': activeNav === '2' }"
        @click="$emit('update-nav','2')"
      >
        乐库
      </div>
      <div
        class="nav-btn"
        :class="{ 'nav-btn-active': activeNav === '3' }"
        @click="$emit('update-nav','3')"
      >
        视频
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
let inputvalue = ref("");
const props=defineProps({
  activeNav:String
})
</script>
<script lang="ts">
export default { name: "CustomNavbar" };
</script>
<style scoped lang="scss">
.custom-navbar {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: rgb(234, 247, 255);

  padding: 0 1rem;
  .search {
    margin-top: 5rem;
    width: 100%;
    display: flex;
    gap: 0.5rem;
    .input {
      border: 1.5px solid rgb(250, 248, 248);
      width: 65%;
      border-radius: 2rem;
      box-shadow: inset 2px 2px 4px rgba(48, 48, 48, 0.1),
        inset -2px -2px 4px rgba(48, 48, 48, 0.1);
      outline: none;
      background: transparent;
      color: #333;
      padding: 0.4rem;
      height: 1.3rem;
    }
    .input-icon {
      width: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(246, 243, 243, 0.543);
      height: 2rem;
      border-radius: 50%;
      box-shadow: 3px 5px 5px 0.5px rgba(5, 5, 5, 0.1);
    }
  }
  .select {
    margin-top: 0.8rem;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    .nav-btn {
      border-radius: 3rem;
      padding: 0.2rem 0.5rem;
      box-sizing: border-box;
    }
    .nav-btn-active {
      background-color: rgb(39, 39, 39);
      color: white;
      border: 1px solid rgb(224, 221, 221);
    }
  }
}
</style>
